<template>
  <div>
    父组件值|{{this.$parent.msg}}|
    动态组件：
    <button @click="showA">A显示</button>
    <button @click="showB">B显示</button>
    <keep-alive>
      <!-- keep-alive:只要需要被缓存都可以使用，在路由中同样生效 -->
      <component :is="currentComponent"></component>
    </keep-alive>

  </div>
</template>

<script>
  import AComponent from './child/AComponent.vue'
  import BComponent from './child/BComponent.vue'
  export default {
    name: 'Component',
    data() {
      return {
        msgg: '',
        currentComponent: AComponent
      }
    },
    components: {
      BComponent,
      AComponent
    },
    methods: {
      showA() {
        this.currentComponent = AComponent
      },
      showB() {
        this.currentComponent = BComponent
      }
    }
  }
</script>

<style scoped>

</style>
